<template>
  <q-pull-to-refresh ref="pullFresh" class="content-padding" :handler="refresher">
    <!-- 项目层级面包屑 -->
    <breadcrumbs></breadcrumbs>
    <!-- search box -->
    <q-list highlight separator class="search-box">
      <!-- 时间筛选 -->
      <date-select @date="okDate"></date-select>
      <!-- 状态筛选 -->
      <q-item class="bg-white" @click.native="changeStatus">
        <q-item-main>
          <span>{{ $t('预警状态') }}：</span>
          <span style="float:right">{{ status.label || $t('未关闭') }}</span>
        </q-item-main>
        <q-item-side right>
          <q-item-tile icon="navigate_next" color="green" />
        </q-item-side>
      </q-item>
    </q-list>

    <!-- 无限滚动 -->
    <q-infinite-scroll ref="scroll" :handler="loadMore">
      <!-- data list -->
      <q-list highlight separator class="data-list-box">
        <template v-for="(item,index) in dataList">
          <q-item class="bg-white" :key="index" @click.native="itemClick(item)" v-ripple>
            <q-item-main>
              <div class="row item-head">
                <div class="alert-color-box" :class="$tools.alertLevelColor(item.alert_level)"></div>
                <div class="col text-center">{{ item.point_alias }}</div>
                <div class="" style="width: 90px;">{{ item.csec_name }}</div>
              </div>
              <div class="row item-body text-grey-8">
                <div class="col-3">{{ $t('标段') }}：</div>
                <div class="col-9">{{ item.contractname }}</div>
                <div class="col-3">{{ $t('工点') }}：</div>
                <div class="col-9">{{ item.wsname }}</div>
                <div class="col-3">{{ $t('报警值') }}：</div>
                <div class="col-9">
                  {{ $t('速率') }}：{{ (Number(item.speed) * 1000).toFixed(2) }}（mm/d）
                  {{ $t('累计') }}：{{ (Number(item.cumu) * 1000).toFixed(2) }}（mm）
                </div>
                <div class="col-3">{{ $t('测量时间') }}：</div>
                <div class="col-9">{{ item.surveytime }}</div>
              </div>
            </q-item-main>
          </q-item>
          <!-- <q-item-separator :key="index" /> -->
        </template>
      </q-list>
      <!-- 加载提示 -->
      <div class="row justify-center infinite-bottom-box">
        <!-- <q-spinner-dots slot="message" :size="40" /> -->
        {{ loadingText }}
      </div>
    </q-infinite-scroll>

    <!-- 二级界面 -->
    <detail ref="detail"></detail>
  </q-pull-to-refresh>
</template>

<script>
import baseMixins from 'pages/mixins/index.js';
import detail from './components/detailPage.vue';
export default {
  mixins: [baseMixins],
  components: {
    detail
  },
  data() {
    return {
      status: {},
      isAllTime: true,
      dateRange: [
        this.$formatDate(Date.now() - 7 * 24 * 3600 * 1000 * 1000, 'YYYY-MM-DD'),
        this.$formatDate(Date.now(), 'YYYY-MM-DD')
      ],
      dataList: [],
      loadingText: this.$t('加载中') + '....',
      locked: true
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.$refs.pullFresh.trigger();
      });
    },
    refresher(done) {
      this.loadingText = this.$t('加载中') + '....';
      this.dataList = [];
      // this.$refs.scroll.stop();
      this.getAlerts(1).then(result => {
        this.dataList = result.data;
        // 无限滚动
        this.locked = false;// 第一次重置
        this.$refs.scroll.reset();
        this.$refs.scroll.fetching = false;// 手动重置无限滚动刷新锁状态
        this.$refs.scroll.resume();// poll
      }).catch(err => {
        this.loadingText = err.msg;
      }).finally(() => {
        done();
      });
    },
    changeStatus() {
      this.$q.actionSheet({
        title: this.$t('请选择预警状态'),
        grid: false,
        actions: [
          {
            label: '全部',
            icon: 'select_all',
            color: 'secondary',
            value: -1
          },
          {
            label: '未关闭',
            icon: 'donut_large',
            color: 'negative',
            value: 0
          },
          {
            label: '已关闭',
            icon: 'speaker_notes_off',
            color: 'positive',
            value: 1
          }
        ]
      }).then(action => {
        this.status = action;
        this.$refs.pullFresh.trigger();
      }).catch(err => err);
    },
    okDate(time) {
      if(time){
        this.dateRange = time;
      } else {
        this.isAllTime = true;
      }
      // 触发刷新
      this.$refs.pullFresh.trigger();
    },
    getAlerts(page) {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel,
        status: this.status.value || 0,
        page: page || 1,
        size: 5
      };
      if(!this.isAllTime){
        pars.start_date = this.dateRange[0];
        pars.end_date = this.dateRange[1];
      }
      return this.$axios.getAlertList(pars);
    },
    loadMore(index, done) {
      if(index === 1){
        done(this.locked);
        return;
      }
      // 需要更新DOM后才不会重复的加载more事件
      this.$nextTick(() => {
        this.loadingText = this.$t('加载中') + '....';
        this.getAlerts(index).then(result => {
          this.dataList = this.dataList.concat(result.data);
          done();
        }).catch(err => {
          this.loadingText = this.$t('已经是最后一条数据咯');
        });
      });
    },
    itemClick(data) {
      this.$refs.detail.show(data);
    }
  }
}
</script>

<style lang="less" scoped>
.content-padding{
  // height: calc(100vh - 117px);

  .search-box{
    border: none;
    padding: 0;
    margin-bottom: 10px;
  }
  
  .data-list-box{
    padding: 0;
    border: none;

    .q-item{
      .q-item-main{
        .item-head{
          margin-bottom: 10px;

          .item-head-right{
            width:35px;
            text-align:center;
          }
        }
        .item-body{
          font-size: 12px;

          [class^=col]{
            padding: 2px 0;
          }
        }
      }
    }
  }
}
</style>

